<template>
  <div class="page-topic-detail">
    <div class='input-wrp'>
      <div class="text-input">
        <div class="left-topicTitle">
          <span>标题</span><span class="red-dot">*</span><br>
          <el-input v-model="topicTitle" class="pc-input" :value="topicTitle" maxlength="25"
                    placeholder="输入标题"></el-input>
        </div>
        <div class="right-publisher">
          <span>发布者名称</span><span class="red-dot">*</span><br>
          <el-input v-model="publisher" class="pc-input" :value="publisher" maxlength="10"
                    placeholder="输入发布者名称"></el-input>
        </div>
      </div>
      <div class="type-select">
        <span>设置</span>&nbsp&nbsp&nbsp&nbsp&nbsp
        <el-radio-group v-model="radioPriority">
          <el-radio :label="0">无</el-radio>
          <el-radio :label="2">置顶</el-radio>
          <el-radio :label="1">精品</el-radio>
        </el-radio-group>
      </div>
    </div>
    <br><br>
    <edit-pic :headTitle="'请上传图片'" :fileUrlsArray="this.imageFiles"
              :headSonTitle="'支持jpg,png,gif,bmp(最多选择9张)'" @getFileUrls="getFileUrls"></edit-pic>
    <div class="remarkFrameClass">
      <div class="remarkTitleClass">
        <span>内容</span><span class="red-dot">*</span>
      </div>
      <div class="remarkContentClass">
        <el-input type="textarea" v-model="topicContent" :value="topicContent" maxlength="2000"
                  :rows="4" placeholder="填写内容"></el-input>
      </div>
    </div>
    <el-row class="btntopicClass">
      <el-button v-if="this.isClose" class="topicBtnClass" type="primary" @click="updateTopic">发布
      </el-button>
      <el-button v-if="!this.isClose" class="topicBtnClass" type="primary" @click="updateTopic">更新
      </el-button>
    </el-row>
  </div>

</template>
<script type="text/ecmascript-6">
  import PcDialog from 'components/dialog';
  import fileUpload from 'components/fileUpload/file.vue';
  import editPic from './editPicture.vue';
  import inputCom from 'components/input/baseTitleInput.vue';
  import ElInput from '../../../../../node_modules/element-ui/packages/input/src/input.vue';
  export default{
    props: {
      id: [String, Number],
      isCloseOper: [String, Boolean],
    },
    components: {
      ElInput,
      fileUpload,
      editPic,
      inputCom,
      PcDialog
    },
    data() {
      return {
        topicTitle: '', // 话题标题
        publisher: '', // 发布人
        topicContent: '', // 发布内容
        formData: [], // 更新请求的话题数据
        imageFiles: [], // 图片数据
        topicId: this.id, // 话题id
        isClose: this.isCloseOper, // 是否显示更新发布的boolean值
        radioPriority: 0, // 设置选项
        version: null // 版本号
      };
    },
    created() {
      // 根据话题id判断是否为发布还是更新
      if (this.topicId != null) {
        this.initData();
      }
    },
    computed: {},
    methods: {
      getFileUrls(titleImg, fileNameArr, fileUrlArr) {
        // 处理新添加的图片
        for (let i = 0; i < fileUrlArr.length; i++) {
          let hit = false;
          for (let j = 0; j < this.imageFiles.length; j++) {
            if (fileUrlArr[i] === this.imageFiles[j].url) {
              hit = true;
            }
          }
          if (hit === false) {
            let singleImg = {id: null, name: '', url: ''};
            singleImg.name = fileNameArr[i];
            singleImg.url = fileUrlArr[i];
            this.imageFiles.push(singleImg);
          }
        }
        // 处理被删除的图片
        let imageFilesTmp = this.imageFiles;
        this.imageFiles = [];
        for (let j = 0; j < imageFilesTmp.length; j++) {
          for (let i = 0; i < fileUrlArr.length; i++) {
            if (fileUrlArr[i] === imageFilesTmp[j].url) {
              this.imageFiles.push(imageFilesTmp[j]);
            }
          }
        }
      },
      // 根据话题ID获取要跟更新的话题的详细数据
      initData() {
        let that = this;
        this.ajax({
          url: '/ibs/web/bbs/detail',
          type: 'POST',
          data: {id: this.topicId},
          success: (res) => {
            setTimeout(() => {
              that.$pcNProgress.done();
              that.$previewRefresh();
            }, 300);
            that.formData = res.result;
            that.radioPriority = that.formData.priority;
            that.topicTitle = that.formData.title;
            that.publisher = that.formData.contactName;
            that.topicContent = that.formData.content;
            that.version = that.formData.version;
            // 话题图片信息获取
            if (that.formData.topicFileVoList !== null) {
              that.formData.topicFileVoList.forEach((item, index) => {
                let singleImg = {id: null, name: '', url: ''};
                singleImg.id = item.fileId;
                singleImg.name = item.name;
                singleImg.url = item.url;
                that.imageFiles.push(singleImg);
              });
            }
          }
        });
      },
      // 更新/发布话题
      updateTopic() {
        
        // 检查不能为空的项目
        if (this.topicTitle === '') {
          this.errorTip('标题不能为空!');
          return;
        } else if (this.publisher === '') {
          this.errorTip('发布者名称不能为空!');
          return;
        } else if (this.imageFiles.length === 0) {
          this.errorTip('请上传图片!');
          return;
        } else if (this.topicContent === '') {
          this.errorTip('内容不能为空!');
          return;
        }
        // 将被选择的对象加入到后端接口参数中
        var fileDtoList = [];
        this.imageFiles.forEach(function (item) {
          fileDtoList.push({fileId: item.id, name: item.name, url: item.url});
        });

       var that = this;
        // 调用后端接口
        this.ajax({
          type: 'POST',
          url: '/ibs/web/bbs/saveTopic',
          data: {
            contactName: that.publisher,
            content: that.topicContent,
            ibsTopicFileDtoList: fileDtoList,
            id: that.topicId,
            priority: that.radioPriority,
            title: that.topicTitle,
            version: that.version
          },
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              if (that.isCloseOper) {
                this.successTip('话题发布成功', 2000);
              } else {
                this.successTip('话题更新成功', 2000);
              }
              that.$emit('sure');
            } else {
              this.errorTip(res.message);
            }
          }
        });
      }
    }
  };
</script>
<style>
  .input-wrp {
    width: 100%;
    height: 150px;
    background-color: white;
    border: 1px solid #e5e5e5;
    padding: 25px 20px;
  }

  .text-input {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .pc-input {
    margin-top: 10px;
  }

  .right-publisher {
    width: 45%;
  }

  .left-topicTitle {
    width: 45%;
  }

  .type-select {
    margin-top: 30px;
  }

  .page-topic-detail {
    text-align: left;
    width: 958px;
    font-size: 18px;
  }

  .page-topic-detail .el-table--border td {
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }

  .page-topic-detail .table .w50 ul {
    box-sizing: border-box;
  }

  .page-topic-detail .el-table--border td div {
    color: #000;
  }

  .remarkFrameClass {
    width: 100%;
    height: 210px;
    margin-top: 30px;
    background-color: white;
    border: 1px solid #e4e4e4;
  }

  .remarkFrameClass .remarkTitleClass {
    margin-left: 20px;
    margin-top: 20px;
    font-size: 14px;
    color: #333333;
  }

  .remarkFrameClass .remarkContentClass {
    margin-top: 20px;
    margin-left: 22px;
    height: 60px;
    width: 95.5%;
    background-color: white;
  }

  .btntopicClass {
    margin-left: 350px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .topicBtnClass {
    position: relative;
    width: 140px;
    height: 40px;
    top: 50%;
    left: 50%;
    margin-left: -250px;

  }

  .red-dot {
    color: #ff6c2b;
    font-size: 21px;
    position: relative;
    top: 8px;
    left: 7px;
  }
</style>

